<template>
	<view class="container">

		<view class="main">
			<!-- user box begin -->
			<view class="d-flex flex-column bg-white user-box">

				<view class="d-flex align-items-center">
					<view class="avatar">
						<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="setAvatar" plain="true">
							<image :src="isLogin ? member.avatarUrl : logo"></image>
						</button>
						<view class="badge" v-if="isLogin">
							<image src="/static/images/mine/level.png"></image>
							<view>{{ member.memberLevel }}</view>
						</view>
					</view>
					<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
						<view v-if="isLogin"
							class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center">
							<input class="text-truncate-inp" type="nickname" :value="member.nickName" @blur="setNickName">
							<view class="iconfont iconarrow-right line-height-100 text-truncate-i"></view>
						</view>
						<view v-else class="font-size-lg font-weight-bold" @tap="login">请点击授权登录</view>
						<view class="font-size-sm text-color-assist">
							{{ isLogin ? member.currentValue : 0 }}/{{ isLogin ? member.currentValue + member.needValue : 0 }}
						</view>
						<view class="w-100">
							<progress percent="0" activeColor="#ADB838" height="8rpx" :percent="growthValue"
								border-radius="8rpx" />
						</view>
					</view>
					<view
						class="level-benefit d-flex flex-shrink-0 align-items-center justify-content-end text-color-white bg-warning font-size-sm"
						@tap="memberCode">
						<view>会员码</view>
						<view class="iconfont iconarrow-right line-height-100"></view>
					</view>
				</view>
				<!-- user grid begin -->
				<view class="w-100 d-flex align-items-center just-content-around">
					<view class="user-grid" @tap="coupons">
						<view class="value font-size-extra-lg font-weight-bold text-color-base">
							{{ isLogin ? member.couponNum : '***' }}
						</view>
						<view class="font-size-sm text-color-assist">卡券</view>
					</view>
					<view class="user-grid" @tap="integrals">
						<view class="value font-size-extra-lg font-weight-bold text-color-base">
							{{ isLogin ? member.pointNum : '***' }}
						</view>
						<view class="font-size-sm text-color-assist">积分</view>
					</view>
					<view class="user-grid" @tap="balance">
						<view class="value font-size-extra-lg font-weight-bold text-color-base">
							{{ isLogin ? member.balance : '***' }}
						</view>
						<view class="font-size-sm text-color-assist">余额</view>
					</view>
				</view>
				<!-- user grid end -->
			</view>
			<!-- user box end -->
			<!-- level benefit box begin -->
			<view class="level-benefit-box" v-if="false">
				<view class="d-flex align-items-center justify-content-between font-size-base">
					<view class="text-color-base">新用户加入会员，享会员权益</view>
					<view class="text-color-warning" @tap="login">立即加入</view>
				</view>
				<view class="row">
					<view class="grid">
						<image src="/static/images/mine/rhyl.png"></image>
						<view>入会有礼</view>
					</view>
					<view class="grid">
						<image src="/static/images/mine/jfdh.png"></image>
						<view>积分兑换</view>
					</view>
					<view class="grid">
						<image src="/static/images/mine/sjtq.png"></image>
						<view>升级特权</view>
					</view>
					<view class="grid">
						<image src="/static/images/mine/srtq.png"></image>
						<view>生日特权</view>
					</view>
					<view class="grid">
						<image src="/static/images/mine/nxbz.png"></image>
						<view>宝藏</view>
					</view>
				</view>
			</view>
			<view class="card bg-white user-box" v-if="false">
				<view class="d-flex flex-column card-one">
					<view class="text-color-white font-size-lg desc">
						<text>尊敬的会员</text>
					</view>
					<view class="card-text">
						<view class="up">
							<text>成长值 2/20</text>
							<text></text>
						</view>
						<view class="font-size-sm">
							<text>再升级可以领取升级礼包</text>
						</view>
					</view>
				</view>
				<view class="card-two">
					<view class="card-img">
						<image src="/static/images/vip.png" mode=""></image>
					</view>
					<text class="font-size-sm text-color-white ml-20">
						查看权益
					</text>
				</view>
			</view>
			<!-- level benefit box end -->
		</view>
		<!-- service box begin -->
		<view class="service-box">
			<list-cell arrow last @tap="integrals">
				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">积分商城</view>
				</view>
			</list-cell>
			<list-cell arrow last @tap="orders">
				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">我的订单</view>
				</view>
			</list-cell>
			<list-cell arrow last @tap="userinfo">
				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">我的资料</view>
				</view>
			</list-cell>
			<list-cell arrow last @tap="addresses">
				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">收货地址</view>
				</view>
			</list-cell>
			<list-cell arrow last>
				<button class="d-flex flex-fill align-items-center justify-content-between overflow-hidden btnkf" plain open-type="contact">
					<view class="flex-shrink-0 mr-20">联系客服</view>
				</button>
			</list-cell>
			<list-cell arrow last @tap="look_over">
				<view class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">选择餐厅</view>
				</view>
			</list-cell>
			<!-- <view class="grid" @tap="track">
				<view class="image">
					<image src="/static/images/mine/lxkf.png"></image>
				</view>
				<view>餐厅足迹</view>
			</view> -->
			<!-- <view class="grid" @tap="look_over">
				<view class="image">
					<image src="/static/images/mine/lxkf.png"></image>
				</view>
				<view>选择餐厅</view>
			</view> -->
			<!-- <view class="grid" @tap="services">
				<view class="image">
					<image src="/static/images/mine/gdfw.png"></image>
				</view>
				<view>更多服务</view>
			</view> -->
		</view>
		<!-- service box end -->
		<!-- tips begin -->
		<view class="d-flex just-content-center align-items-center text-color-assist"
			style="padding: 10rpx 0; font-size: 22rpx;">
		</view>
		<!-- tisps end -->
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell'
	import {
		mapMutations
	} from 'vuex'
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			listCell,
		},
		data() {
			return {
				logo: this.$baseUrl + '/logo.png'
			}
		},
		computed: {
			...mapState(['member', 'store']),
			...mapGetters(['isLogin']),
			growthValue() {
				if (!this.isLogin) return 0
				const {
					currentValue,
					needValue
				} = this.member
				return currentValue / (currentValue + needValue) * 100
			}
		},
		onShow() {
			this.getLogin()
			this.getStore()
		},
		methods: {
			...mapActions(['getStore', 'getLogin']),
			...mapMutations(['SET_MEMBER']),
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			packages() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/packages/index'
				})
			},
			balance() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/balance/balance'
				})
			},
			addresses() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			integrals() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/integrals/integrals'
				})
			},
			attendance() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/attendance/attendance'
				})
			},
			orders() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/orders/orders'
				})
			},
			memberCode() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/mine/member-code'
				})
			},
			coupons() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/coupons/coupons?go=menu'
				})
			},
			userinfo() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/mine/userinfo'
				})
			},
			track() {
				uni.navigateTo({
					url: '/pages/restaurant/track'
				})
			},
			look_over(){
				uni.navigateTo({
					url: '/pages/restaurant/look-over'
				})
			},
			services() {
				uni.navigateTo({
					url: '/pages/services/services'
				})
			},
			giftCards() {
				if (!this.isLogin) {
					this.login()
					return
				}
				uni.navigateTo({
					url: '/pages/giftcard/giftcard'
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.store.mobile //仅为示例
				});
			},
			setAvatar(e){
				// 写入头像
				this.member.avatarUrl = e.detail.avatarUrl
				
				this.$http.upload('/user/upAvatarUrl', {
				filePath: e.detail.avatarUrl, // 要上传文件资源的路径。
				// 注：如果局部custom与全局custom有同名属性，则后面的属性会覆盖前面的属性，相当于Object.assign(全局，局部)
				custom: {auth: true}, // 可以加一些自定义参数，在拦截器等地方使用。比如这里我加了一个auth，可在拦截器里拿到，如果true就传token
				name: 'avatarUrl', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
				// 返回当前请求的task, options。请勿在此处修改options。非必填
				getTask: (task, options) => {
				  task.Update((res) => {
				    if (res.progress > 50) {
				      uploadTask.abort();
				    }
				  });
				}
				}).then(res => {
				// 返回的res.data 已经进行JSON.parse
				}).catch(err => {

				})

			},
			setNickName(e){
				this.member.nickName = e.detail.value
				this.$http.post('/user/upNickName', {'nickName':e.detail.value}).then(res => {
					
				}).catch(err => {
				
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		min-height: 100%;
		background-color: #fcfcfc;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
		
		.main{
			padding: 0 30rpx;
			
			.card{
				width: 100%;
				height: 300rpx;
				border-radius: 20rpx;
				background: linear-gradient(to bottom, #fc6c84, #fc94bc);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				
				.card-one{
					width: 50%;
					height: 100%;
					// border: red solid;
					justify-content: space-around;
					
					.desc{
						position: relative;
						top: 20rpx;
						left: 30rpx;
					}
					
					.card-text{
						color: #FFFFFF;
						position: relative;
						left: 30rpx;
						
						.up{
							position: relative;
							top: -30rpx;
							font-size: 24rpx;
						}
					}
				}
				
				.card-two{
					width: 50%;
					position: relative;
					left: 130rpx;
					
					.card-img{
						width: 150rpx;
						height: 150rpx;
						
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.bg {
		width: 100%;
		height: calc(410 / 594 * 750rpx);
	}

	.position-relative {
		margin-top: 150rpx;
	}

	.hym-btn {
		position: absolute;
		top: 40rpx;
		right: 40rpx;
		color: $color-primary;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rem;
		font-size: $font-size-sm;
		box-shadow: 0 0 20rpx rgba(66, 66, 66, 0.1);

		&::after {
			border: 0;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.user-box {
		position: relative;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
		box-shadow: $box-shadow;
		
		.text-truncate-inp{
			position: absolute;
		}
		.text-truncate-i{
			opacity: 0;
		}
	}
	
	.avatar-btn{
		width: 140rpx;
		height: 140rpx;
		border-radius: 100%;
		border: none;
		
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 100%;
			position: absolute;
			right: 0rpx;
		}
	}

	.avatar {
		position: relative;
		margin-left: 35rpx;
		margin-right: 35rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);

		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 100%;
		}

		.badge {
			position: absolute;
			right: -10rpx;
			bottom: -10rpx;
			background-color: #FFFFFF;
			border-radius: 50rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: $color-warning;
			font-size: 24rpx;
			padding: 8rpx 16rpx;
			box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.level-benefit {
		margin-left: 35rpx;
		padding: 10rpx 0 10rpx 30rpx;
		border-radius: 50rem 0 0 50rem;
	}

	.user-grid {
		width: 25%;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.value {
			margin-bottom: 20rpx;
		}
	}

	.level-benefit-box {
		border-radius: 8rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 10rpx 8rpx rgba($color: #878889, $alpha: 0.1);
		width: 100%;
		display: flex;
		padding: 30rpx;
		flex-direction: column;
		background-color: #FFFFFF;

		.row {
			display: flex;
			padding: 30rpx 0 20rpx;
			justify-content: space-around;
			align-items: center;

			.grid {
				width: 20%;
				display: flex;
				flex-direction: column;
				font-size: $font-size-sm;
				color: $text-color-assist;
				align-items: center;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.banner {
		width: 100%;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
	}

	.service-box {
		width: 100%;
		background-color: #FFFFFF;
		padding: 32rpx 30rpx 10rpx;
		box-shadow: $box-shadow;
		
		.btnkf{
			border: none;
			padding-left: 0;
			font-size: 14px;
			color: #5A5B5C;
		}

		.row {
			display: flex;
			flex-wrap: wrap;
			color: $text-color-assist;
			font-size: $font-size-sm;
			padding-bottom: -40rpx;

			.grid {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				width: 25%;
				position: relative;

				.image {
					image {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 20rpx;
					}
				}

				.new-badage {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 0;
					right: 30rpx;
				}
			}
		}
	}
</style>
